<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>大事件-后台首页</title>
  <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/iconfont.css" />
  <link rel="stylesheet" href="css/main.css" />
  <script src="./libs/jquery-1.12.4.min.js"></script>
  <!-- 导入bootstrap的js文件 -->
  <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="sider">
    <a href="#" class="logo"><img src="images/logo02.png" alt="logo" /></a>
    <div class="user_info">
      <img src="images/2.jpg" alt="person" />
      <span>欢迎&nbsp;&nbsp;李思思</span>
      <b>管理员</b>
    </div>
    <!-- 左侧导航栏 -->
    <div class="menu">
      <div class="level01 active">
        <a href="./main_count.html" target="main_frame"><i
            class="iconfont icon-yidiandiantubiao04"></i><span>首页</span></a>
      </div>

      <div class="level01">
        <a href="./article_list.html" target="main_frame"><i class="iconfont icon-icon-article"></i><span>文章管理</span><b
            class="iconfont icon-arrowdownl"></b></a>
      </div>

      <ul class="level02">
        <li>
          <a href="./article_list.html" target="main_frame"><i
              class="iconfont icon-previewright"></i><span>文章列表</span></a>
        </li>
        <li>
          <a href="./article_release.html" target="main_frame"><i
              class="iconfont icon-previewright"></i><span>发表文章</span></a>
        </li>
        <li>
          <a href="./article_category.html" target="main_frame"><i
              class="iconfont icon-previewright"></i><span>文章类别管理</span></a>
        </li>
      </ul>

      <div class="level01">
        <a href="./comment_list.html" target="main_frame"><i class="iconfont icon-comment"></i><span>评论管理</span></a>
      </div>
      <div class="level01" id="user">
        <a href="./user.html" target="main_frame"><i class="iconfont icon-user"></i><span>个人中心</span></a>
      </div>
    </div>
    <!-- 顶部栏 -->
    <div class="header_bar">
      <div class="user_center_link">
        <a href="./user.html" target="main_frame">个人中心</a>
        <img src="images/2.jpg" alt="person" />
        <a href="javascript:void(0)" class="logout"><i class="iconfont icon-tuichu"></i> 退出</a>
      </div>
    </div>
    <!-- 右侧主体内容 -->
    <div class="main" id="main_body">
      <iframe src="./main_count.html" style="width: 100%;height: 100%;" name="main_frame"></iframe>
    </div>
  </div>
</body>

</html>

<script>
  // 0. 设置ajax的全局属性,可以给当前页面所有的ajax请求共同使用

  $(function () {
    //     $.ajaxSetup(
    //     {
    //         // 所有ajax请求发送之前,都会执行以下的函数
    //         // 将全局的携带token信息移植到jq中   即可解决全局使用
    //还可自行创建js 保存该全局变量
    //         beforeSend:function(xhr){
    //             // 利用请求头携带token数据
    //             xhr.setRequestHeader('Authorization',localStorage.getItem('token'))
    //         }
    //     }
    // )
    // 携带token数据,发起ajax请求
    $.ajax({
      url: 'http://localhost:8080/api/v1/admin/user/info',
      // 在请求头加入token 会向系统展示令牌 获得系统认证
      // headers:{
      //     'Authorization':localStorage.getItem('token')
      // },
      type: 'get',
      success: function (backData) {
        console.log(backData)
        if (backData.code == 200) {
          $('.user_info span').html(`欢迎&nbsp;&nbsp;${backData.data.nickname}`)
          $('.user_center_link img , .user_info img').attr(
            'src',
            backData.data.userPic
          )
        }
      },
      error: function (xhr, status, err) {
        if (err == 'Forbidden') {
          alert('你还没有获取token 禁止非法登录')
          window.location = './login.html'
        }
      }
    })
    $('.logout').on('click', function () {
      localStorage.removeItem('token')
      alert('你已成功退出')
      window.location = './index.html'
    })

    $('.level01').on('click', function () {
      $(this)
        .addClass('active')
        .siblings('.level01')
        .removeClass('active')
      //添加细节 让列表2默认高亮
      $('.level02 li')
        .eq(0)
        .click()

      if ($(this).index() == 1) {
        $('.level02').slideToggle()

        $(this)
          .find('b')
          .toggleClass('rotate0')
      } else {
        $('.level02').slideUp()
        $('icon-previewright').toggleClass('rotate0')
      }
    })
    $('.level02 li').on('click', function () {
      $(this)
        .addClass('active')
        .siblings()
        .removeClass('active')
    })
  })
</script>